<template>
  <div class="left-tree">
    <el-input class="filter-input" placeholder="输入关键字进行过滤" v-model="filterText">
    </el-input>
    <el-radio-group v-model="tabData" style="margin-bottom: 10px;">
      <el-radio-button label="river">河流/区域</el-radio-button>
      <el-radio-button label="region">行政区划</el-radio-button>
    </el-radio-group>
    <el-tree :data="treeData" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current
      :props="defaultProps" :filter-node-method="filterNode" @check="handleCheckChange">
    </el-tree>
  </div>
</template>
<script>
import { lakeSegmentTree, segmentRegionTree } from '@/api/dataResources/waterJcData/sgMonitor.js'
export default {
  name: 'LeftTree',
  props: {
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    treeData: {
      handler() {
        this.$nextTick(() => {
          // treeData 更新完成后的操作
          // 例如：获取当前勾选的节点
          const checkedNodes = this.$refs.tree.getCheckedNodes();
          this.$emit('tree-check-change', checkedNodes);
        });
      },
      deep: true
    },
    tabData: {
      handler(newVal) {
        if (newVal === 'river') {
          this.getRiverTree();
        } else if (newVal === 'region') {
          this.getRegonTree();
        }
      },
      immediate: true // 初始化时也会执行
    }
  },
  data() {
    return {
      filterText: "",
      tabData: "river",
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  created() {
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    query() {
      this.getRiverTree()
    },
    getRegonTree() {
      segmentRegionTree({segmentType: "IsAuto"}).then(res => {
        if (res.code == 200) {
          this.treeData = this.convertToTree(res.data || []);
        }
      })
    },
    getRiverTree() {
      lakeSegmentTree({segmentType: "IsAuto"}).then(res => {
        if (res.code == 200) {
          this.treeData = this.convertToTree(res.data || []);
        }

      })
    },

    convertToTree(list) {
      // 创建一个映射表，用于快速查找节点
      const map = {};
      const treeData = [];

      // 初始化所有节点
      list.forEach(item => {
        map[item.id] = {
          id: item.id,
          label: item.name,
          ...item,
          children: []
        };
      });

      // 构建树形结构
      list.forEach(item => {
        const node = map[item.id];
        if (item.pId === '0' || !item.pId) {
          // 根节点
          treeData.push(node);
        } else {
          // 子节点
          const parent = map[item.pId];
          if (parent) {
            parent.children.push(node);
          } else {
            // 如果找不到父节点，则作为根节点处理
            treeData.push(node);
          }
        }
      });

      return treeData;
    },
    handleCheckChange(data, checked) {
      // 获取所有选中的节点
      const checkedNodes = this.$refs.tree.getCheckedNodes();
      // 发送给父组件
      this.$emit('tree-check-change', checkedNodes);
    },
  }
}
</script>
<style scoped>
.filter-input {
  margin-bottom: 10px;
}
</style>